<link href="/static/assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
<div class="content-wrapper">
    <div class="container">
        <div class="row pad-botm">
            <div class="col-md-12">
                <h4 class="header-line">My Certification</h4>

            </div>

        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-info panel-zs">
                    <div class="panel-heading">My Certification Detail</div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table">
                                <tbody>
                                    <tr class="success">
                                        <th>EDUCATION STATUS</th>
                                        <th>EXAM REGISTRATION</th>
                                        <th>WORK EXPERIENCE</th>
                                    </tr>
                                    <tr class="info">
                                        <td>{$data['education_status'] ? '<button type="button" class="btn btn-primary">COMPLETED</button>' : '<button type="button" class="btn btn-info">INCOMPLETE</button>'}</td>
                                        <td>{$data['exam_registration'] ? '<button type="button" class="btn btn-primary">COMPLETED</button>' : '<button type="button" class="btn btn-info">INCOMPLETE</button>'}</td>
                                        <td>{$data['work_experience'] ? '<button type="button" class="btn btn-primary">COMPLETED</button>' : '<button type="button" class="btn btn-info">INCOMPLETE</button>'}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /. ROW  -->
        <div class="row">
            <div class="col-md-12">
                <!-- Advanced Tables -->
                <div class="panel panel-default panel-zs">
                    <div class="panel-heading">
                        My CPE Details
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                                    <tr>
                                        <th class="col-xs-2">Program Date</th>
                                        <th class="col-xs-8">Program Title</th>
                                        <th class="col-xs-2">Credit Earned</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {if condition="$info"}
                                    {volist name="info" id="v"}
                                    <tr>
                                        <td>{$v.completion_date}</td>
                                        <td>{$v.program_title}</td>
                                        <td>{$v.cpe_credits}</td>
                                    </tr>
                                    {/volist}
                                    {else/}
                                    <tr>
                                        <td colspan="3" class="text-center">No course !</td>
                                    </tr>
                                    {/if}
                                </tbody>
                            </table>
                        </div>

                    </div>
                    {if condition="$data.level_status eq 1"}
                    <div class="panel-footer"><a href="#Transcripts" data-toggle="modal" >Add Transcripts</a></div>
                    {/if}
                </div>
                <!--End Advanced Tables -->
            </div>
        </div>
        <!-- /. ROW  -->
    </div>
</div>

<!-- Pop Transcripts -->
<div class="modal fade" id="Transcripts" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4>Modify Contact Information</h4>
            </div>
            <div class="modal-body">
                <form role="form" id="activity_form">
                    <div class="form-group">
                        <label>Program Title</label>
                        <input class="form-control" name="program_title" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Activity Type</label>
                        <select class="form-control" name="activity_type">
                            <option value="">Professional Development</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>CPE Credits</label>
                        <input class="form-control" name="cpe_credits" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Date</label>
                        <input class="form-control" name="completion_date" type="text" />
                    </div>

                    <button type="button" class="btn btn-info" id="activity">Save</button>
                    <button type="reset" class="btn btn-primary">Cancel</button>

                </form>
            </div>
            <div class="modal-footer">
                <button class="view-bio" data-dismiss="modal" type="button">Close</button></div>
        </div>
    </div>
</div>
